// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import xtxMessage from './Message'
import Confirm from './Confirm'

// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
console.log('11', importFn.keys())
// 封装全局src指令
const defineDirective = (app) => {
  // 🔔 调用指令通过 v-src="xxx" 调用
  app.directive('src', {
    // target  目标dom 元素
    // value  调用v-src传过来的值
    mounted (target, { value }) {
      // console.log(target, value)
      const { stop } = useIntersectionObserver(
        target,
        // isIntersecting 是否进入可视区域，true是进入 false是移出
        // observerElement 被观察的dom
        ([{ isIntersecting }]) => {
          // console.log(isIntersecting)
          // 根据isIntersecting状态来进行业务逻辑
          if (isIntersecting) {
            // 图片的src 等于传过来的地址
            target.src = value
            // 图片报错时使用默认地址
            target.onerror = () => {
              target.src = defaultImg
            }
            stop()
          }
        },
        // 🔔优化： 0 元素刚进入可视区触发，1 表示元素完整进入可视区才触发
        { threshold: [0] }
      )
    }
  })
}

// 导出install方法，app.use 会自动调用install方法
export default {
  install (app) {
    //   app 注册全局组件
    // app.component('XtxSkeleton', XtxSkeleton)
    // app.component('XtxCarousel', XtxCarousel)
    // app.component('XtxMore', XtxMore)
    // app.component('XtxBread', XtxBread)
    // app.component('XtxBreadItem', XtxBreadItem)
    importFn.keys().forEach(item => {
      const component = importFn(item).default
      // console.log(component)
      app.component(component.name, component)
    })

    // app注册全局指令
    defineDirective(app)

    // 如果你想挂载全局的属性，能够通过选项式API的组件实例调用的属性   this.$message
    app.config.globalProperties.$message = xtxMessage// 原型函数
    app.config.globalProperties.$confirm = Confirm// 原型函数
  }
}
